<template>
  <div class="realtime-container">
    <aside>
      <div class="input_section">
        <el-input
          placeholder="请输入内容"
          clearable
          v-model.trim="searchData"
          prefix-icon="el-icon-search"
          @input="getDeviceTree"
        >
          <el-button slot="append" @click="getDeviceTree">搜索</el-button>
        </el-input>
      </div>
      <el-scrollbar class="collapseSection" v-loading="isLoading">
        <el-tree
          :default-expand-all="true"
          :props="defaultProps"
          :data="deviceList"
          show-checkbox
          node-key="id"
          :check-on-click-node="true"
          @check-change="handleCheckChange"
          ref="deviceTreeRef"
        >
          <template v-slot="{ node }">
            <span>
              <i
                v-if="node.level == 1"
                class="el-icon-location f18"
                :class="node.checked ? 'blue' : ''"
              />
              <i
                v-else-if="node.level == 2"
                class="el-icon-video-camera-solid f18"
                :class="node.checked ? 'blue' : ''"
              />
              <span :class="node.checked ? 'blue' : ''">{{ node.label }}</span>
            </span>
          </template>
        </el-tree>
      </el-scrollbar>
      <!--      <div id="ControlPTZ">控制云台</div>-->
      <!--      <div id="ControlBox">-->
      <!--        <svg width="188px" height="188px" viewBox="0 0 188 188" version="1.1" xmlns="http://www.w3.org/2000/svg"-->
      <!--             xmlns:xlink="http://www.w3.org/1999/xlink">-->
      <!--          <title>控制云台</title>-->
      <!--          <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">-->
      <!--            <g id="运营监测-视频监控-实时视频" transform="translate(-143.000000, -827.000000)" fill-rule="nonzero">-->
      <!--              <g id="云台控制备份" transform="translate(143.000000, 827.000000)">-->
      <!--                <path d="M188,0 L0,0 L0,188 L188,188 L188,0 Z M184,4 L184,184 L4,184 L4,4 L184,4 Z" id="矩形"-->
      <!--                      fill="#DDDDDD"></path>-->
      <!--                <path style="cursor: pointer" @click="setPosition('center')"-->
      <!--                      d="M92.6230494,66.0003734 L93.1146079,66.0020201 C101.011074,66.0567713 108.164568,69.256717 113.377813,74.4167789 C118.593309,79.5790691 121.866881,86.7031669 121.999717,94.6024744 C122.000903,102.659269 118.781181,109.940078 113.555542,115.245124 C108.329925,120.550148 101.098405,123.879425 93.0756881,123.999775 C85.027985,123.906866 77.8054971,120.624324 72.565071,115.366425 C67.3246129,110.108494 64.0662398,102.875184 64.0000119,94.8710462 C63.9733765,87.1637084 67.0401744,79.7678723 72.5132805,74.3410115 C77.9860399,68.9144946 85.4071841,65.9104599 93.1146079,66.0020201 Z"-->
      <!--                      id="路径" stroke="#FFFFFF" stroke-width="4" fill="#888888"></path>-->
      <!--                <path style="cursor: pointer" @click="setPosition('up')"-->
      <!--                      d="M92.9046006,39.8478049 C98.354667,39.8478049 103.804733,40.0435291 109.2548,39.8478049 C110.94501,39.8478049 113.635549,38.5429772 113.945996,37.4012529 C114.203614,35.4992835 113.530623,33.5899623 112.117809,32.2145628 C107.219648,27.8107694 101.769582,23.7984243 96.8024329,19.590355 C95.8595038,18.579242 94.5026457,18 93.0770711,18 C91.6514964,18 90.2946383,18.579242 89.3517093,19.590355 C84.2465838,23.831045 79.0034819,27.8107694 74.0018387,32.2145628 C72.5512191,33.5330439 71.8256069,35.411075 72.0356755,37.3033908 C73.2412717,38.8323798 75.0939889,39.7859009 77.1063069,39.9130463 C82.3149146,40.1413911 87.5925106,39.8478049 92.9046006,39.8478049 L92.9046006,39.8478049 Z"-->
      <!--                      id="路径" fill="#888888"></path>-->
      <!--                <path style="cursor: pointer" @click="setPosition('right')"-->
      <!--                      d="M148.086685,94.7543788 C148.086685,100.327776 147.891644,105.901173 148.086685,111.474571 C148.266337,113.321811 149.251119,114.976645 150.752249,115.953804 C152.516139,116.184902 154.281948,115.540505 155.530761,114.20998 C159.984204,109.183665 164.112578,103.952194 168.533514,98.618145 C169.467922,97.7178712 170,96.446261 170,95.1134014 C170,93.7805417 169.467922,92.5089316 168.533514,91.6086577 C164.275112,86.3771867 160.146738,81.0431378 155.530761,76.0168224 C154.458034,74.785888 151.88999,73.5891464 150.817263,74.1362284 C149.334161,75.365638 148.432499,77.2125613 148.34674,79.1967362 C148.086685,84.2572441 148.086685,89.4545225 148.086685,94.7543788 Z"-->
      <!--                      id="路径" fill="#888888"></path>-->
      <!--                <path style="cursor: pointer" @click="setPosition('down')"-->
      <!--                      d="M92.7819636,148.102091 C87.5353411,148.102091 82.2544269,147.872386 77.042096,148.102091 C75.0325684,148.196431 73.1827807,149.178489 72.035515,150.7601 C71.824687,152.670311 72.5607395,154.564784 74.0244308,155.879228 C78.7909702,160.177983 83.9690095,164.082959 88.8727155,168.250454 C89.9207113,169.390738 91.4410242,170.03051 93.0275643,169.99888 C94.6141044,169.967251 96.1052535,169.267442 97.1027116,168.08638 C101.869251,164.017329 106.910124,160.210798 111.573788,156.010488 C112.945454,154.796335 114.454287,152.072697 113.871329,151.022619 C112.604012,149.384812 110.64706,148.364442 108.521831,148.233351 C103.343792,147.839571 98.2343361,148.102091 92.7819636,148.102091 L92.7819636,148.102091 Z"-->
      <!--                      id="路径" fill="#888888"></path>-->
      <!--                <path style="cursor: pointer" @click="setPosition('left')"-->
      <!--                      d="M39.9097253,95.5278432 C39.9097253,89.9640093 40.1128434,84.331486 39.9097253,78.7676522 C39.8110957,76.9072718 38.8907335,75.191231 37.4046014,74.0967791 C35.5655387,73.7549684 33.6765523,74.3298942 32.3266475,75.6422886 C27.5248398,80.7552113 23.0042565,86.1325696 18.7854371,91.7499313 C17.7381876,93.7589272 17.7381876,96.1633856 18.7854371,98.1723815 C23.0029704,103.790795 27.5236128,109.168224 32.3266475,114.280024 C33.6153153,115.606666 35.4559716,116.220602 37.2691893,115.928568 C38.7795315,114.862591 39.7270879,113.154988 39.8420192,111.292039 C40.1128434,106.071652 39.9097253,100.81692 39.9097253,95.5278432 L39.9097253,95.5278432 Z"-->
      <!--                      id="路径" fill="#888888"></path>-->
      <!--                <path style="cursor: pointer" @click="setPosition('left-up')"-->
      <!--                      d="M44.6798192,46.2327512 C47.3936125,43.5184005 50.2354782,40.8651275 52.8547026,38.0561887 C53.7161938,37.1026607 54.1246959,35.8368846 53.9666002,34.6108861 C53.2770799,33.5877153 52.1171722,32.9885315 50.8485482,33 C46.1190387,33.2584272 41.391483,33.7766554 36.6873611,34.5524963 C35.2198774,35.0449133 34.0470885,36.2179432 33.5547726,37.6857283 C32.777979,42.3907307 32.2598505,47.1193192 32.0027614,51.849824 C31.9556686,53.0971425 32.5132003,54.2538132 33.4998491,54.9557233 C34.7229784,55.1390177 35.9970403,54.747212 36.9592152,53.8918821 C39.6315822,51.4712016 42.1000403,48.8130599 44.6798192,46.2327512 L44.6798192,46.2327512 Z"-->
      <!--                      id="路径备份" fill-opacity="0.75" fill="#888888"></path>-->
      <!--                <path style="cursor: pointer" @click="setPosition('right-up')"-->
      <!--                      d="M142.320181,46.2327512 C139.606388,43.5184005 136.764522,40.8651275 134.145297,38.0561887 C133.283806,37.1026607 132.875304,35.8368846 133.0334,34.6108861 C133.72292,33.5877153 134.882828,32.9885315 136.151452,33 C140.880961,33.2584272 145.608517,33.7766554 150.312639,34.5524963 C151.780123,35.0449133 152.952912,36.2179432 153.445227,37.6857283 C154.222021,42.3907307 154.74015,47.1193192 154.997239,51.849824 C155.044331,53.0971425 154.4868,54.2538132 153.500151,54.9557233 C152.277022,55.1390177 151.00296,54.747212 150.040785,53.8918821 C147.368418,51.4712016 144.89996,48.8130599 142.320181,46.2327512 L142.320181,46.2327512 Z"-->
      <!--                      id="路径备份-2" fill-opacity="0.75" fill="#888888"></path>-->
      <!--                <path style="cursor: pointer" @click="setPosition('left-down')"-->
      <!--                      d="M44.6798192,140.767249 C47.3936125,143.481599 50.2354782,146.134872 52.8547026,148.943811 C53.7161938,149.897339 54.1246959,151.163115 53.9666002,152.389114 C53.2770799,153.412285 52.1171722,154.011468 50.8485482,154 C46.1190387,153.741573 41.391483,153.223345 36.6873611,152.447504 C35.2198774,151.955087 34.0470885,150.782057 33.5547726,149.314272 C32.777979,144.609269 32.2598505,139.880681 32.0027614,135.150176 C31.9556686,133.902858 32.5132003,132.746187 33.4998491,132.044277 C34.7229784,131.860982 35.9970403,132.252788 36.9592152,133.108118 C39.6315822,135.528798 42.1000403,138.18694 44.6798192,140.767249 L44.6798192,140.767249 Z"-->
      <!--                      id="路径备份" fill-opacity="0.75" fill="#888888"></path>-->
      <!--                <path style="cursor: pointer" @click="setPosition('right-down')"-->
      <!--                      d="M142.320181,140.767249 C139.606388,143.481599 136.764522,146.134872 134.145297,148.943811 C133.283806,149.897339 132.875304,151.163115 133.0334,152.389114 C133.72292,153.412285 134.882828,154.011468 136.151452,154 C140.880961,153.741573 145.608517,153.223345 150.312639,152.447504 C151.780123,151.955087 152.952912,150.782057 153.445227,149.314272 C154.222021,144.609269 154.74015,139.880681 154.997239,135.150176 C155.044331,133.902858 154.4868,132.746187 153.500151,132.044277 C152.277022,131.860982 151.00296,132.252788 150.040785,133.108118 C147.368418,135.528798 144.89996,138.18694 142.320181,140.767249 L142.320181,140.767249 Z"-->
      <!--                      id="路径备份-2" fill-opacity="0.75" fill="#888888"></path>-->
      <!--              </g>-->
      <!--            </g>-->
      <!--          </g>-->
      <!--        </svg>-->
      <!--      </div>-->
    </aside>
    <main>
      <header>
        <div class="video-header">
          <span>监控视频-{{ gridLength }}屏</span>
          <!--      分屏按钮组-->
          <div id="iconSection">
            <i :class="['font_family', 'icon-wypp']" @click="changeFullScreen"></i>
            <i
              :class="['font_family', 'icon-a-1p', { 'current-button': this.gridLength === 1 }]"
              @click="setGridLength(1)"
            ></i>
            <i
              :class="['font_family', 'icon-a-4p', { 'current-button': this.gridLength === 4 }]"
              @click="setGridLength(4)"
            ></i>
            <i
              :class="['font_family', 'icon-a-9p', { 'current-button': this.gridLength === 9 }]"
              @click="setGridLength(9)"
            ></i>
            <i
              :class="['font_family', 'icon-a-12p', { 'current-button': this.gridLength === 12 }]"
              @click="setGridLength(12)"
            ></i>
            <i
              :class="['font_family', 'icon-a-16p', { 'current-button': this.gridLength === 16 }]"
              @click="setGridLength(16)"
            ></i>
            <i
              :class="['font_family', 'icon-a-24p', { 'current-button': this.gridLength === 24 }]"
              @click="setGridLength(24)"
            ></i>
            <i
              :class="['font_family', 'icon-a-25p', { 'current-button': this.gridLength === 25 }]"
              @click="setGridLength(25)"
            ></i>
            <i :class="['font_family', 'icon-sppp']" @click="changeSimpleFullScreen"></i>
          </div>
        </div>
      </header>
      <!-- 监控视频区域 -->
      <div class="video-box" ref="videoArea">
        <div
          v-for="key in gridLength"
          :class="[
            'video-item',
            `grid${gridLength}`,
            { 'current-video': key === currentVideoBoxId }
          ]"
          :key="key"
          @click="setCurrentVideoBoxId(key)"
          @dblclick="changeSimpleFullScreen"
          :ref="'playerScreenRef' + key"
        >
          <el-tag v-if="getSiteInfo(key)" size="mini" type="info" @click="showSiteInfo(key)"
            >{{ getSiteInfo(key).siteName }}-{{ getSiteInfo(key).name }}
          </el-tag>
          <player-box
            v-if="getSiteInfo(key)"
            :url="getSiteInfo(key).url"
            :id="'player' + key"
            :ref="'playerRef' + key"
          ></player-box>
        </div>
      </div>
    </main>
    <el-dialog :visible.sync="siteInfoDialog" width="25%">
      <template slot="title">
        <i class="el-icon-place"></i>
        {{ currentSiteInfo.siteName }}
      </template>
      <el-descriptions :column="1">
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            负责人
          </template>
          {{ currentSiteInfo.siteAgent }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{ currentSiteInfo.phone }}
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="siteInfoDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import _ from 'lodash'
import {
  getDeviceTree,
  getDeviceVideoUrl
} from '@/service/monitor/video_surveillance/video_surveillance'
import PlayerBox from '@/components/player/PlayerBox'

export default {
  name: 'VideoRealtime',
  components: {
    PlayerBox
  },
  data() {
    const that = this
    return {
      // 树的配置
      defaultProps: {
        children: 'device',
        label(data, node) {
          return data.site || data.name
        },
        disabled(data, node) {
          // 根据窗口判断节点是否可选
          if (node.childNodes.length <= that.gridLength - that.checkedNodesLength || node.checked) {
            if (that.checkedNodesLength >= that.gridLength) {
              if (!node.checked) {
                return true
              }
            } else {
              return false
            }
          } else {
            return true
          }
        }
      },
      // 选中的节点数
      checkedNodesLength: 0,
      searchData: '',
      // 节流阀
      timer: null,
      // 视频方格总数
      gridLength: 4,
      // 当前选择视频窗口id
      currentVideoBoxId: 1,
      // 选中的设备详细列表
      checkedDevicelist: [],
      // 设备数据
      deviceList: [],
      // 视频数据
      videoList: [],
      isLoading: false,
      siteInfoDialog: false,
      currentSiteInfo: {}
    }
  },
  created() {
    this.getDeviceTree()
  },
  computed: {},
  watch: {
    gridLength(newVal, oldVal) {
      // 防止选中框溢出
      const val = this.currentVideoBoxId > newVal ? newVal : this.currentVideoBoxId
      this.setCurrentVideoBoxId(val)
      // 联动取消设备树
      if (newVal < oldVal) {
        for (let i = oldVal; i > newVal; i--) {
          this.videoList = this.videoList.filter((item) => {
            if (item.boxId === i) {
              this.$refs.deviceTreeRef.setChecked(item.id, false)
            }
            return item.boxId !== i
          })
        }
      }
    },
    // 判断视频数组的增删改
    async checkedDevicelist(newVal, oldVal) {
      // console.log(this.$refs.deviceTreeRef)
      let difference = []
      if (newVal.length > oldVal.length) {
        // 增加设备
        // difference = newVal.filter((item) => oldVal.indexOf(item) === -1)
        difference = _.difference(newVal, oldVal)
        for (let i = 0; i < difference.length; i++) {
          this.saveVideoList({
            url: await this.getDeviceVideoUrl(difference[i].id),
            id: difference[i].id,
            siteAgent: difference[i].siteAgent,
            phone: difference[i].phone,
            siteName: difference[i].siteName,
            name: difference[i].name
          })
        }
      } else {
        // difference = oldVal.filter((item) => newVal.indexOf(item) === -1)
        difference = _.difference(oldVal, newVal)
        // console.log('删除', difference)
        for (let i = 0; i < difference.length; i++) {
          this.destroyVideoList(difference[i].id)
        }
      }
    },
    searchData(newValue) {
      if (newValue === '') {
        this.getDeviceTree()
      }
    }
  },
  methods: {
    // 获取视频url
    async getDeviceVideoUrl(id) {
      const res = await getDeviceVideoUrl({
        id
        // type: 'webrtc' // 'flv' // 'webrtc'
      })
      console.log('获取视频地址', res)
      if (res.code !== 0) {
        this.$message.error(res.msg)
        return this.$refs.deviceTreeRef.setChecked(id, false)
      }
      return res.data
    },
    // 获取站点设备树
    getDeviceTree: _.throttle(async function () {
      if (this.isLoading) return
      this.isLoading = true
      const res = await getDeviceTree({
        keyword: this.searchData
      })
      this.isLoading = false
      if (res.code !== 0) return console.log(res.msg)
      this.deviceList = res.data
    }, 1000),
    // 点击设备树获取设备列表
    handleCheckChange(data, checked, indeterminate) {
      // 节流阀
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        const nodesArr = this.$refs.deviceTreeRef.getCheckedNodes(true)
        this.checkedNodesLength = nodesArr.length
        // console.log(nodesArr)
        this.checkedDevicelist = nodesArr
      }, 0)
    },
    // 更新播放视频数组
    saveVideoList(videoItem) {
      // 查询当前播放数组中有没有相同的boxId
      if (this.videoList.findIndex((item) => item.boxId === this.currentVideoBoxId) !== -1) {
        this.currentVideoBoxId = this.findNextBox(this.currentVideoBoxId)
      }
      videoItem.boxId = this.currentVideoBoxId
      this.videoList.push(videoItem)
    },
    // 删除播放视频数组
    destroyVideoList(id) {
      this.videoList = this.videoList.filter((item) => item.id !== id)
    },
    // 判空查找下一个播放盒子
    findNextBox(boxId) {
      if (this.checkedNodesLength <= this.gridLength) {
        const blockArr = []
        for (let i = 1; i <= this.gridLength; i++) {
          // console.log(this.videoList.findIndex(item => item.boxId === i))
          if (this.videoList.findIndex((item) => item.boxId === i) === -1) {
            // 查找里面有没有相同ID的
            blockArr.push(i)
          }
        }
        return blockArr[0]
      } else {
        return boxId
      }
    },
    // 获取货场负责人与联系电话,取播放地址等信息
    getSiteInfo(key) {
      const res = this.videoList.find((item) => {
        return item.boxId === key
      })
      if (res === undefined) {
        return ''
      } else {
        return res
      }
    },
    // 设置视频方格
    setGridLength(val) {
      this.gridLength = val
    },
    // 设置当前选中方格
    setCurrentVideoBoxId(val) {
      this.currentVideoBoxId = val
    },
    // 切换全屏
    changeFullScreen() {
      const el = this.$refs.videoArea
      console.dir(el)
      const rfs =
        el.requestFullScreen ||
        el.webkitRequestFullScreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullScreen
      if (typeof rfs !== 'undefined' && rfs) {
        rfs.call(el)
        return
      }
      if (typeof window.ActiveXObject !== 'undefined') {
        const wscript = new window.ActiveXObject('WScript.Shell')
        if (wscript) {
          wscript.SendKeys('{F11}')
        }
      }
    },
    // 切换单独全屏
    changeSimpleFullScreen() {
      console.dir(this.$refs['playerScreenRef' + this.currentVideoBoxId])
      const el = this.$refs['playerScreenRef' + this.currentVideoBoxId][0]
      const rfs =
        el.requestFullScreen ||
        el.webkitRequestFullScreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullScreen
      if (typeof rfs !== 'undefined' && rfs) {
        rfs.call(el)
        return
      }
      if (typeof window.ActiveXObject !== 'undefined') {
        const wscript = new window.ActiveXObject('WScript.Shell')
        if (wscript) {
          wscript.SendKeys('{F11}')
        }
      }
    },
    // 控制台
    setPosition(val) {
      console.log(val)
    },
    // 点击标签展示站点信息
    showSiteInfo(key) {
      this.currentSiteInfo = this.getSiteInfo(key)
      this.siteInfoDialog = true
    }
  }
}
</script>

<style lang="less" scoped>
.realtime-container {
  display: flex;
  height: 73vh;
  min-height: 760px;

  main {
    width: 100%;
  }

  header {
    height: 60px;
    line-height: 60px;
    padding-left: 24px;
    border-bottom: 1px solid #dddddd;
  }

  aside {
    width: 267px;
  }

  .input_section {
    width: 267px;
    height: 62px;
    background-color: #f5faff;
  }

  .el-input {
    width: 235px;
    height: 36px;
    margin: 13px 16px;
    border: 1px solid #1585fc;
  }

  .el-input ::v-deep .el-input__inner {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border: 0;
  }

  .el-input ::v-deep .el-input-group__append {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color: #fff;
    background-color: #1585fc;
    cursor: pointer;
    border: 0;
  }

  .collapseSection {
    height: 700px;
  }

  /* 控制云台 */

  #ControlPTZ {
    height: 34px;
    line-height: 34px;
    background-color: #f3f9ff;
    padding-left: 16px;
  }

  #ControlBox {
    height: 228px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #ControlBox img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .f18 {
    font-size: 18px;
  }

  .blue {
    color: #409eff;
  }

  .video-header {
    display: flex;
    justify-content: space-between;
    padding-right: 24px;
  }

  #iconSection i {
    margin-left: 28px;
    font-size: 22px;
    color: #bdbdbd;
    cursor: pointer;

    &.current-button {
      color: #1883fc;
    }
  }

  .video-box {
    height: 95%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 5px;

    .video-item {
      position: relative;
      border: 1px solid #dddddd;
      background-color: #333;

      .el-tag {
        position: absolute;
        top: 1px;
        right: 1px;
        z-index: 999;
        cursor: pointer;
      }

      &.grid1 {
        width: 100%;
        height: 100%;
      }

      &.grid4 {
        width: 50%;
        height: 50%;
      }

      &.grid9 {
        width: 33.33%;
        height: 33.33%;
      }

      &.grid12 {
        width: 25%;
        height: 33.33%;
      }

      &.grid16 {
        width: 25%;
        height: 25%;
      }

      &.grid24 {
        width: 16.66%;
        height: 25%;
      }

      &.grid25 {
        width: 20%;
        height: 20%;
      }

      &.current-video {
        border: 3px solid #910011;
      }
    }
  }
}
</style>
